<template>
    <el-form
            label-width="auto"
            :model="${ignoreFirstHumpName}Model">
        <el-row :gutter="10">
            <el-col>
                <el-text size="large">查询面板</el-text>
            </el-col>
            <#list tableFields as field>
                <el-col :span="4">
                    <el-form-item required label="${field.comment}">
                        <el-input v-model="${ignoreFirstHumpName}Model.${field.name}" placeholder="${field.comment}" clearable/>
                    </el-form-item>
                </el-col>
            </#list>
            <el-col :span="4">
                <el-space>
                    <el-button type="primary" @click="searchAction">
                        <el-icon>
                            <Search/>
                        </el-icon>
                        搜索
                    </el-button>
                    <el-button @click="clearSearchAction">
                        <el-icon>
                            <CloseBold/>
                        </el-icon>
                        清空
                    </el-button>
                </el-space>
            </el-col>
        </el-row>
    </el-form>
</template>
<script setup>
    import {CloseBold} from "@element-plus/icons-vue";
    import {ref} from "vue";
    import {clearProperty, filterProperty} from "@/util/Func.js";
    import {useSearchStore} from "@/store/SearchStore.js";

    const searchStore = useSearchStore()
    const ${ignoreFirstHumpName}Model = ref({
        <#list tableFields as field>
        ${field.name}: '',
        </#list>
    })

    const searchAction = () => {
        searchStore.searchCondition = filterProperty(${ignoreFirstHumpName}Model.value)
    }

    const clearSearchAction = () => {
        ${ignoreFirstHumpName}Model.value = clearProperty(${ignoreFirstHumpName}Model.value)
        searchStore.clearSearchCondition()
    }

</script>
